<template>
  <div>
    <h5>count组件</h5>
    <p>count的值是{{ count }}</p>
    <!-- <button @click="add">count+1</button> -->
    <!-- 可以简写 -->
    <!-- 不建议直接修改，建议只读 -->
    <button @click="count += 1">count+1</button>
    <br />
    <button @click="show">打印this</button>
  </div>
</template>

<script>
export default {
  // props中的数据可以直接在模版结构中使用
  // 不建议直接修改，建议只读
  //   props: ["init"],
  props: {
    init: {
      // 默认值
      default: 0,
      // 规定类型
      type: Number,
      // 必填项校验
      //   required: true,
    },
  },
  data() {
    return {
      count: this.init,
    };
  },
  methods: {
    add() {
      this.count += 1;
    },
    show() {
      console.log(this.count);
    },
  },
};
</script>

<style lang="less">
</style>>
